<template>
	<view>
		<navbar title="订单列表" :autoBack="true"></navbar>
		<view class="con">
			<view class="tabsbox">
				<u-tabs :list="list4" lineWidth="24rpx" lineHeight='7rpx' lineColor="#3262FD" :activeStyle="{
			 	           color: '#010101',
			 	           fontWeight: 'bold',
			 	           transform: 'scale(1.15)'
			 	       }" :inactiveStyle="{
			 	           color: '#3A4E6D',
			 	           transform: 'scale(1)'
			 	       }" itemStyle="padding-left: 20rpx; padding-right: 20rpx; height: 70rpx;font-size:26rpx;" @click='clicktab'>
				</u-tabs>

			</view>
			<scroll-view scroll-y="true" class="scboxl">
				<view class="orderlist">
					<view class="orderlist__item" v-for="(item,index) in orderlist" :key="index">
						<view class="u-flex u-flex-items-start u-flex-between">
							<view class="orderlist__item__on">
								订单ID:{{item.id}}
							</view>
							<view class="orderlist__item__status" v-if="item.status==1">
								待支付
							</view>
							<view class="orderlist__item__status" v-if="item.status==2">
								待发货
							</view>
							<view class="orderlist__item__status" v-if="item.status==3&&item.sendtype!=2">
								已发货
							</view>
							<view class="orderlist__item__status" v-if="item.status==3&&item.sendtype==2">
								待提货
							</view>
							<view class="orderlist__item__status" v-if="item.status==4">
								已取消
							</view>
						</view>
						<view class="u-flex">
							<image :src="URL(item.image)" class="orderlist__item__pic" mode="aspectFill"></image>
							<view class="" style="flex: 1;">
								<view class="orderlist__item__name">
									{{item.name}}
								</view>
								<view class="u-flex u-flex-y-center u-flex-between">
									<view class="orderlist__item__time">
										{{$u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss')}}
									</view>
									<view class="orderlist__item__num">
										<image src="/static/my/chen.png" class="orderlist__item__num__chen" mode="">
										</image>
										{{item.num}}
									</view>
								</view>
								<view class="u-flex u-flex-items-end u-flex-between" style="margin-top: 38rpx;">
									<view class="orderlist__item__price">
										<text style="font-size: 24rpx;">￥</text>{{item.price*item.num}}
									</view>
									<view class="u-flex u-flex-y-center">
										<u-button color="#becde1" v-if="type==1&&(item.status==1||item.status==2)" @click="cancel(item)"
											:customStyle='{width:"86rpx",height:"56rpx",marginLeft:"16rpx",padding:0,borderRadius:"10rpx",fontSize:"28rpx",color:"#3A4E6D"}'>取消</u-button>
										<u-button color="#58bd5f"
											:customStyle='{width:"86rpx",height:"56rpx",marginLeft:"16rpx",padding:0,borderRadius:"10rpx",fontSize:"28rpx",color:"#FFFFFF"}'>详情</u-button>
										<u-button color="#becde1" v-if="type==2&&item.status==2" @click="sendgoods(item)"
											:customStyle='{width:"86rpx",height:"56rpx",marginLeft:"16rpx",padding:0,borderRadius:"10rpx",fontSize:"28rpx",color:"#FFFFFF"}'>发货</u-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import goods from '@/api/_goods.js'
	export default {
		data() {
			return {
				// 1=待开始,2=待发货,3=已发货/待完成,4=已取消,5=已完成',
				list4: [{
						name: '全部',
						status:'',
						sendtype:''
					},
					{
						name: '待发货',
						status:2,
						sendtype:''
						
					},
					{
						name: '已发货',
						status:3,
						sendtype:''
					},
					{
						name: '已收货',
						status:5,
						sendtype:''
					},
					{
						name: '待提货',
						status:3,
						sendtype:2
					},
					{
						name: '已取消',
						status:4,
						sendtype:''
					}
				],
				orderlist:[],
				admin_id:''
			};
		},
		methods:{
			clicktab(e){
				this.getlist(e.status,e.sendtype)
			},
			getlist(status,sendtype){
				goods.orderlist({status,sendtype,admin_id:this.admin_id}).then(res=>{
					if(res.data.code==1){
						this.orderlist=res.data.data
					}
				})
			},
			sendgoods(item){
				goods.sendOrder({id:item.id}).then(res=>{
					if(res.data.code==1){
						uni.$u.toast('发货成功')
						this.getlist()
					}
				})
			},
			cancel(item){
				let _this=this
				uni.showModal({
					title:'提示',
					content:'确定取消该笔订单？',
					success(r) {
						if(r.confirm){
							goods.cancelOrder({id:item.id}).then(res=>{
								if(res.data.code==1){
									uni.$u.toast('取消成功')
									_this.getlist()
								}
							})
						}
					}
				})
				
			}
		},
		onLoad(o) {
			this.type=o.type
			if(this.type==2){
				this.admin_id=uni.getStorageSync('88ffuserinfo').user_id
			}
			this.getlist('','')
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f3f7;
	}

	.con {
		.tabsbox {
			padding: 10rpx 10rpx 20rpx;
		}

		.scboxl {
			height: calc(100vh - var(--status-bar-height) - 44px - 70rpx - 30rpx);
		}
		.orderlist{
			padding: 0 30rpx 50rpx;
			&__item{
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				margin-bottom: 28rpx;
				&__on{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #1E1E1E;
					line-height: 24rpx;
				}
				&__status{
					width: 97rpx;
					height: 47rpx;
					background: #BECDE1;
					border-radius: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 22rpx;
					color: #3A4E6D;
					line-height: 22rpx;
				}
				&__pic{
					width: 179rpx;
					height: 176rpx;
					background: #4CD3C5;
					border-radius: 26rpx;
					margin-right: 26rpx;
				}
				&__name{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #010101;
					line-height: 46rpx;
					margin-bottom: 16rpx;
				}
				&__time{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #59698C;
					line-height: 24rpx;
				}
				&__num{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #59698C;
					line-height: 24rpx;
					display: flex;
					align-items: center;
					&__chen{
						width: 11rpx;
						height: 10rpx;
						margin-right: 5rpx;
					}
				}
				&__price{
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 33rpx;
					color: #F94405;
					line-height: 24rpx;
					
				}
			}
		}
	}
</style>